<template>
  <div class="box">
    <div id="A" class="reportBox">
      <el-row :gutter="20">
        <el-col :span="8" class="topBox">
          <div class="grid-content bg-purple">
            <img class="seoImg" src="@/assets/seo.jpg" alt="" />
          </div>
        </el-col>
        <el-col :span="8" class="topBox topBox2">
          <div class="grid-content bg-purple">
            <h4>{{ task.website_url }}</h4>
            <p>{{ task.create_time }}</p>
            <div style="color: #5fb878">
              <i class="el-icon-document-checked" />
              <span>通过</span>
              <span>{{ successNum }}项</span>
            </div>
            <div v-if="errorNum > 0" style="color: #ffb800">
              <i class="el-icon-magic-stick" />
              <span>改进</span>
              <span>{{ errorNum }}项</span>
            </div>
          </div>
        </el-col>
        <el-col :span="8" class="topBox topBox3">
          <div class="grid-content bg-purple">
            <el-progress
              type="circle"
              :percentage="progressNum"
              :width="150"
              :stroke-width="10"
            />
          </div>
        </el-col>
      </el-row>
      <div id="B" class="cardBox">
        <el-card class="box-card">
          <div class="header clearfix">代码分析</div>
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item
              title="VUE-JS、iframe、Ajax、flash"
              name="101ajax"
            >
              <div v-if="!checkData['101'].tags.status" class="loading">
                <svg
                  version="1.2"
                  height="100"
                  width="400"
                  xmlns="http://www.w3.org/2000/svg"
                  viewport="0 0 60 60"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <path
                    id="pulsar"
                    stroke="rgba(0,155,155,1)"
                    fill="none"
                    stroke-width="1"
                    stroke-linejoin="round"
                    d="M0,90L250,90Q257,60 262,87T267,95 270,88 273,92t6,35 7,-60T290,127 297,107s2,-11 10,-10 1,1 8,-10T319,95c6,4 8,-6 10,-17s2,10 9,11h210"
                  />
                </svg>
              </div>
              <div v-else>
                <div v-if="checkData['101'].tags.status != 1" class="red">
                  <div
                    v-for="(item, key) in checkData['101'].tags.msg.ajax"
                    :key="key"
                  >
                    {{ item }}
                  </div>
                </div>
                <div v-else class="green">未发现异常</div>
              </div>
            </el-collapse-item>
            <el-collapse-item title="https" name="101https">
              <div v-if="!checkData['101'].ssl.status" class="loading">
                <svg
                  version="1.2"
                  height="100"
                  width="400"
                  xmlns="http://www.w3.org/2000/svg"
                  viewport="0 0 60 60"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <path
                    id="pulsar"
                    stroke="rgba(0,155,155,1)"
                    fill="none"
                    stroke-width="1"
                    stroke-linejoin="round"
                    d="M0,90L250,90Q257,60 262,87T267,95 270,88 273,92t6,35 7,-60T290,127 297,107s2,-11 10,-10 1,1 8,-10T319,95c6,4 8,-6 10,-17s2,10 9,11h210"
                  />
                </svg>
              </div>
              <div v-else>
                <div v-if="checkData['101'].ssl.status != 1" class="red">
                  {{ checkData['101'].ssl.msg }}
                </div>
                <div v-else class="green">未发现异常</div>
              </div>
            </el-collapse-item>
            <el-collapse-item title="Hn标签" name="101hn">
              <div v-if="!checkData['101'].hn.status" class="loading">
                <svg
                  version="1.2"
                  height="100"
                  width="400"
                  xmlns="http://www.w3.org/2000/svg"
                  viewport="0 0 60 60"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <path
                    id="pulsar"
                    stroke="rgba(0,155,155,1)"
                    fill="none"
                    stroke-width="1"
                    stroke-linejoin="round"
                    d="M0,90L250,90Q257,60 262,87T267,95 270,88 273,92t6,35 7,-60T290,127 297,107s2,-11 10,-10 1,1 8,-10T319,95c6,4 8,-6 10,-17s2,10 9,11h210"
                  />
                </svg>
              </div>
              <div v-else>
                <div v-if="checkData['101'].hn.status != 1" class="red">
                  {{ checkData['101'].hn.msg }}
                </div>
                <div v-else class="green">未发现异常</div>
              </div>
            </el-collapse-item>
            <el-collapse-item title="ALT标签" name="101alt">
              <div v-if="!checkData['101'].tags.status" class="loading">
                <svg
                  version="1.2"
                  height="100"
                  width="400"
                  xmlns="http://www.w3.org/2000/svg"
                  viewport="0 0 60 60"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <path
                    id="pulsar"
                    stroke="rgba(0,155,155,1)"
                    fill="none"
                    stroke-width="1"
                    stroke-linejoin="round"
                    d="M0,90L250,90Q257,60 262,87T267,95 270,88 273,92t6,35 7,-60T290,127 297,107s2,-11 10,-10 1,1 8,-10T319,95c6,4 8,-6 10,-17s2,10 9,11h210"
                  />
                </svg>
              </div>
              <div v-else>
                <div v-if="checkData['101'].tags.status != 1" class="red">
                  <div
                    v-for="(item, key) in checkData['101'].tags.msg.alt"
                    :key="key"
                  >
                    {{ item }}
                  </div>
                </div>
                <div v-else class="green">未发现异常</div>
              </div>
            </el-collapse-item>
            <el-collapse-item title="robots文件" name="101robots">
              <div v-if="!checkData['101'].robots.status" class="loading">
                <svg
                  version="1.2"
                  height="100"
                  width="400"
                  xmlns="http://www.w3.org/2000/svg"
                  viewport="0 0 60 60"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <path
                    id="pulsar"
                    stroke="rgba(0,155,155,1)"
                    fill="none"
                    stroke-width="1"
                    stroke-linejoin="round"
                    d="M0,90L250,90Q257,60 262,87T267,95 270,88 273,92t6,35 7,-60T290,127 297,107s2,-11 10,-10 1,1 8,-10T319,95c6,4 8,-6 10,-17s2,10 9,11h210"
                  />
                </svg>
              </div>
              <div v-else>
                <div v-if="checkData['101'].robots.status != 1" class="red">
                  {{ checkData['101'].robots.msg }}
                </div>
                <div v-else class="green">未发现异常</div>
              </div>
            </el-collapse-item>
            <el-collapse-item title="sitemap文件" name="101sitemap">
              <div v-if="!checkData['101'].sitemap.status" class="loading">
                <svg
                  version="1.2"
                  height="100"
                  width="400"
                  xmlns="http://www.w3.org/2000/svg"
                  viewport="0 0 60 60"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <path
                    id="pulsar"
                    stroke="rgba(0,155,155,1)"
                    fill="none"
                    stroke-width="1"
                    stroke-linejoin="round"
                    d="M0,90L250,90Q257,60 262,87T267,95 270,88 273,92t6,35 7,-60T290,127 297,107s2,-11 10,-10 1,1 8,-10T319,95c6,4 8,-6 10,-17s2,10 9,11h210"
                  />
                </svg>
              </div>
              <div v-else>
                <div v-if="checkData['101'].sitemap.status != 1" class="red">
                  {{ checkData['101'].sitemap.msg }}
                </div>
                <div v-else class="green">未发现异常</div>
              </div>
            </el-collapse-item>
            <el-collapse-item title="404页面" name="101404">
              <div v-if="!checkData['101'].c404.status" class="loading">
                <svg
                  version="1.2"
                  height="100"
                  width="400"
                  xmlns="http://www.w3.org/2000/svg"
                  viewport="0 0 60 60"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <path
                    id="pulsar"
                    stroke="rgba(0,155,155,1)"
                    fill="none"
                    stroke-width="1"
                    stroke-linejoin="round"
                    d="M0,90L250,90Q257,60 262,87T267,95 270,88 273,92t6,35 7,-60T290,127 297,107s2,-11 10,-10 1,1 8,-10T319,95c6,4 8,-6 10,-17s2,10 9,11h210"
                  />
                </svg>
              </div>
              <div v-else>
                <div v-if="checkData['101'].c404.status != 1" class="red">
                  {{ checkData['101'].c404.msg }}
                </div>
                <div v-else class="green">未发现异常</div>
              </div>
            </el-collapse-item>
            <el-collapse-item title="301重定向" name="101301">
              <div v-if="!checkData['101'].c301.status" class="loading">
                <svg
                  version="1.2"
                  height="100"
                  width="400"
                  xmlns="http://www.w3.org/2000/svg"
                  viewport="0 0 60 60"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <path
                    id="pulsar"
                    stroke="rgba(0,155,155,1)"
                    fill="none"
                    stroke-width="1"
                    stroke-linejoin="round"
                    d="M0,90L250,90Q257,60 262,87T267,95 270,88 273,92t6,35 7,-60T290,127 297,107s2,-11 10,-10 1,1 8,-10T319,95c6,4 8,-6 10,-17s2,10 9,11h210"
                  />
                </svg>
              </div>
              <div v-else>
                <div v-if="checkData['101'].c301.status != 1" class="red">
                  {{ checkData['101'].c301.msg }}
                </div>
                <div v-else class="green">未发现异常</div>
              </div>
            </el-collapse-item>
            <el-collapse-item title="URL层级" name="101url">
              <div v-if="!checkData['101'].urlLevel.status" class="loading">
                <svg
                  version="1.2"
                  height="100"
                  width="400"
                  xmlns="http://www.w3.org/2000/svg"
                  viewport="0 0 60 60"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <path
                    id="pulsar"
                    stroke="rgba(0,155,155,1)"
                    fill="none"
                    stroke-width="1"
                    stroke-linejoin="round"
                    d="M0,90L250,90Q257,60 262,87T267,95 270,88 273,92t6,35 7,-60T290,127 297,107s2,-11 10,-10 1,1 8,-10T319,95c6,4 8,-6 10,-17s2,10 9,11h210"
                  />
                </svg>
              </div>
              <div v-else>
                <div v-if="checkData['101'].urlLevel.status != 1" class="red">
                  {{ checkData['101'].urlLevel.msg }}
                </div>
                <div v-else class="green">未发现异常</div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </div>
      <div id="C" class="cardBox">
        <el-card class="box-card">
          <div class="header clearfix">收录分析</div>
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="site收录量" name="102site">
              <div v-if="checkData['102'].status != 1" class="loading">
                <svg
                  version="1.2"
                  height="100"
                  width="400"
                  xmlns="http://www.w3.org/2000/svg"
                  viewport="0 0 60 60"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <path
                    id="pulsar"
                    stroke="rgba(0,155,155,1)"
                    fill="none"
                    stroke-width="1"
                    stroke-linejoin="round"
                    d="M0,90L250,90Q257,60 262,87T267,95 270,88 273,92t6,35 7,-60T290,127 297,107s2,-11 10,-10 1,1 8,-10T319,95c6,4 8,-6 10,-17s2,10 9,11h210"
                  />
                </svg>
              </div>
              <div v-else>
                <div v-if="checkData['102'].count != ''" class="green">
                  {{ checkData['102'].count }}
                </div>
                <div v-else class="green">暂无数据</div>
              </div>
            </el-collapse-item>
            <el-collapse-item title="网站所有页面收录查询" name="102-2">
              <div class="loading">
                <!-- <svg
                  version="1.2"
                  height="100"
                  width="400"
                  xmlns="http://www.w3.org/2000/svg"
                  viewport="0 0 60 60"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <path
                    id="pulsar"
                    stroke="rgba(0,155,155,1)"
                    fill="none"
                    stroke-width="1"
                    stroke-linejoin="round"
                    d="M0,90L250,90Q257,60 262,87T267,95 270,88 273,92t6,35 7,-60T290,127 297,107s2,-11 10,-10 1,1 8,-10T319,95c6,4 8,-6 10,-17s2,10 9,11h210"
                  />
                </svg> -->
                正在开发中···
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </div>
      <div id="D" class="cardBox">
        <el-card class="box-card">
          <div class="header clearfix">关键词分析</div>
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="关键词密度" name="103-1">
              <!-- <div v-if="!checkData['103'].keywords" class="loading">
                <svg
                  version="1.2"
                  height="100"
                  width="400"
                  xmlns="http://www.w3.org/2000/svg"
                  viewport="0 0 60 60"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <path
                    id="pulsar"
                    stroke="rgba(0,155,155,1)"
                    fill="none"
                    stroke-width="1"
                    stroke-linejoin="round"
                    d="M0,90L250,90Q257,60 262,87T267,95 270,88 273,92t6,35 7,-60T290,127 297,107s2,-11 10,-10 1,1 8,-10T319,95c6,4 8,-6 10,-17s2,10 9,11h210"
                  />
                </svg>
              </div>
              <div v-else>
              </div> -->
              <div v-if="checkData['103'].keywords" class="red">
                <div
                  v-for="(item, key) in checkData['103'].keywords"
                  :key="key"
                >
                  {{ item }}
                </div>
              </div>
              <div v-else class="green">暂无数据</div>
            </el-collapse-item>
            <el-collapse-item title="关键词排名" name="103-2">
              <div class="loading">
                <!-- <svg
                  version="1.2"
                  height="100"
                  width="400"
                  xmlns="http://www.w3.org/2000/svg"
                  viewport="0 0 60 60"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <path
                    id="pulsar"
                    stroke="rgba(0,155,155,1)"
                    fill="none"
                    stroke-width="1"
                    stroke-linejoin="round"
                    d="M0,90L250,90Q257,60 262,87T267,95 270,88 273,92t6,35 7,-60T290,127 297,107s2,-11 10,-10 1,1 8,-10T319,95c6,4 8,-6 10,-17s2,10 9,11h210"
                  />
                </svg> -->
                正在开发中···
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </div>
      <div id="E" class="cardBox">
        <el-card class="box-card">
          <div class="header clearfix">链接分析</div>
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="导入链接" name="104-1">
              <div v-if="!checkData['104'].inlinks.linksHave" class="loading">
                <svg
                  version="1.2"
                  height="100"
                  width="400"
                  xmlns="http://www.w3.org/2000/svg"
                  viewport="0 0 60 60"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <path
                    id="pulsar"
                    stroke="rgba(0,155,155,1)"
                    fill="none"
                    stroke-width="1"
                    stroke-linejoin="round"
                    d="M0,90L250,90Q257,60 262,87T267,95 270,88 273,92t6,35 7,-60T290,127 297,107s2,-11 10,-10 1,1 8,-10T319,95c6,4 8,-6 10,-17s2,10 9,11h210"
                  />
                </svg>
              </div>
              <div v-else>
                <div v-if="checkData['104'].inlinks.linksHave[0]">
                  <div
                    v-for="(item, key) in checkData['104'].inlinks.linksHave"
                    :key="key"
                  >
                    <div :class="item.status == 1 ? 'green' : 'red'">
                      {{ item.msg }}
                    </div>
                  </div>
                </div>
                <div v-else class="green">未发现异常</div>
              </div>
            </el-collapse-item>
            <el-collapse-item title="导出链接" name="104-2">
              <div v-if="!checkData['104'].outlinks.linksHave" class="loading">
                <svg
                  version="1.2"
                  height="100"
                  width="400"
                  xmlns="http://www.w3.org/2000/svg"
                  viewport="0 0 60 60"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <path
                    id="pulsar"
                    stroke="rgba(0,155,155,1)"
                    fill="none"
                    stroke-width="1"
                    stroke-linejoin="round"
                    d="M0,90L250,90Q257,60 262,87T267,95 270,88 273,92t6,35 7,-60T290,127 297,107s2,-11 10,-10 1,1 8,-10T319,95c6,4 8,-6 10,-17s2,10 9,11h210"
                  />
                </svg>
              </div>
              <div v-else>
                <div v-if="checkData['104'].outlinks.linksHave[0]">
                  <div
                    v-for="(item, key) in checkData['104'].outlinks.linksHave"
                    :key="key"
                  >
                    <div :class="item.status == 1 ? 'green' : 'red'">
                      {{ item.msg }}
                    </div>
                  </div>
                </div>
                <div v-else class="green">未发现异常</div>
              </div>
            </el-collapse-item>
            <el-collapse-item title="nofollow" name="104-3">
              <!-- <div v-if="!checkData['104'].inlinks.nofollow" class="loading">
                <svg
                  version="1.2"
                  height="100"
                  width="400"
                  xmlns="http://www.w3.org/2000/svg"
                  viewport="0 0 60 60"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <path
                    id="pulsar"
                    stroke="rgba(0,155,155,1)"
                    fill="none"
                    stroke-width="1"
                    stroke-linejoin="round"
                    d="M0,90L250,90Q257,60 262,87T267,95 270,88 273,92t6,35 7,-60T290,127 297,107s2,-11 10,-10 1,1 8,-10T319,95c6,4 8,-6 10,-17s2,10 9,11h210"
                  />
                </svg>
              </div>
              <div v-else>
              </div> -->
              <div v-if="checkData['104'].inlinks.nofollow">
                <div
                  v-for="(item, key) in checkData['104'].inlinks.nofollow"
                  :key="key"
                >
                  <div :class="item.status == 1 ? 'green' : 'red'">
                    {{ item.msg }}
                  </div>
                </div>
              </div>
              <div v-else class="green">暂无数据</div>
            </el-collapse-item>
            <el-collapse-item title="内链优化" name="104-4">
              <div class="loading">
                <!-- <svg
                  version="1.2"
                  height="100"
                  width="400"
                  xmlns="http://www.w3.org/2000/svg"
                  viewport="0 0 60 60"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <path
                    id="pulsar"
                    stroke="rgba(0,155,155,1)"
                    fill="none"
                    stroke-width="1"
                    stroke-linejoin="round"
                    d="M0,90L250,90Q257,60 262,87T267,95 270,88 273,92t6,35 7,-60T290,127 297,107s2,-11 10,-10 1,1 8,-10T319,95c6,4 8,-6 10,-17s2,10 9,11h210"
                  />
                </svg> -->
                正在开发中···
              </div>
            </el-collapse-item>
            <el-collapse-item title="死链接检测" name="104-5">
              <div class="loading">
                <!-- <svg
                  version="1.2"
                  height="100"
                  width="400"
                  xmlns="http://www.w3.org/2000/svg"
                  viewport="0 0 60 60"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <path
                    id="pulsar"
                    stroke="rgba(0,155,155,1)"
                    fill="none"
                    stroke-width="1"
                    stroke-linejoin="round"
                    d="M0,90L250,90Q257,60 262,87T267,95 270,88 273,92t6,35 7,-60T290,127 297,107s2,-11 10,-10 1,1 8,-10T319,95c6,4 8,-6 10,-17s2,10 9,11h210"
                  />
                </svg> -->
                <div v-if="checkData['103'].deadLink" class="red">
                  <div
                    v-for="(item, key) in checkData['103'].deadLink"
                    :key="key"
                  >
                    {{ item }}
                  </div>
                </div>
                <div v-else class="green">暂无数据</div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </div>
      <div id="F" class="cardBox">
        <el-card class="box-card">
          <div class="header clearfix">文章分析</div>
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="文章更新月/年频率" name="105-1">
              <div class="loading">
                <!-- <svg
                  version="1.2"
                  height="100"
                  width="400"
                  xmlns="http://www.w3.org/2000/svg"
                  viewport="0 0 60 60"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <path
                    id="pulsar"
                    stroke="rgba(0,155,155,1)"
                    fill="none"
                    stroke-width="1"
                    stroke-linejoin="round"
                    d="M0,90L250,90Q257,60 262,87T267,95 270,88 273,92t6,35 7,-60T290,127 297,107s2,-11 10,-10 1,1 8,-10T319,95c6,4 8,-6 10,-17s2,10 9,11h210"
                  />
                </svg> -->

                正在开发中···
              </div>
            </el-collapse-item>
            <el-collapse-item title="文章收录占比" name="105-2">
              <div class="loading">
                <!-- <svg
                  version="1.2"
                  height="100"
                  width="400"
                  xmlns="http://www.w3.org/2000/svg"
                  viewport="0 0 60 60"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                  <path
                    id="pulsar"
                    stroke="rgba(0,155,155,1)"
                    fill="none"
                    stroke-width="1"
                    stroke-linejoin="round"
                    d="M0,90L250,90Q257,60 262,87T267,95 270,88 273,92t6,35 7,-60T290,127 297,107s2,-11 10,-10 1,1 8,-10T319,95c6,4 8,-6 10,-17s2,10 9,11h210"
                  />
                </svg> -->
                正在开发中···
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </div>
    </div>
    <div class="rightMenu">
      <a
        v-for="(item, key) in btnList"
        :key="key"
        :class="item.class"
        @click="returnDiv(item.href, key)"
      >
        <i :class="item.icon" />
        <span>{{ item.name }}</span>
      </a>
      <!-- <a class="active" href="#A" @click="returnDiv('#A')">
        <i class="el-icon-s-data" />
        <span>概况</span>
      </a>
      <a href="#B">
        <i class="el-icon-search" />
        <span>代码分析</span>
      </a>
      <a href="#C">
        <i class="el-icon-tickets" />
        <span>收录分析</span>
      </a>
      <a href="#D">
        <i class="el-icon-collection-tag" />
        <span>关键词分析</span>
      </a>
      <a href="#E">
        <i class="el-icon-link" />
        <span>链接分析</span>
      </a>
      <a href="#F">
        <i class="el-icon-news" />
        <span>文章分析</span>
      </a> -->
      <a @click="goTop">
        <i class="el-icon-top" />
        <span>返回顶部</span>
      </a>
    </div>
  </div>
</template>
<script>
import seoCheckApi from '@/api/market/seoCheck.js'
export default {
  props: ['ids'],
  data() {
    return {
      id: 0,
      activeNames: '',
      btnList: [
        { href: '#A', name: '概况', icon: 'el-icon-s-data', class: 'active' },
        { href: '#B', name: '代码分析', icon: 'el-icon-search', class: '' },
        { href: '#C', name: '收录分析', icon: 'el-icon-tickets', class: '' },
        {
          href: '#D',
          name: '关键词分析',
          icon: 'el-icon-collection-tag',
          class: ''
        },
        { href: '#E', name: '链接分析', icon: 'el-icon-link', class: '' },
        { href: '#F', name: '文章分析', icon: 'el-icon-news', class: '' }
      ],
      checkData: {
        101: {
          c301: {},
          c404: {},
          hn: {},
          robots: {},
          sitemap: {},
          ssl: {},
          tags: {
            msg: {
              ajax: [],
              alt: []
            }
          },
          urlLevel: { status: 1, msg: '' }
        },
        102: {},
        103: {},
        104: {
          inlinks: {},
          outlinks: {
            linksHave: []
          }
        },
        105: {}
      },
      totalData: [],
      task: {},
      is_end: false,
      progressNum: 0,
      timer1: {},
      timer2: {},
      successNum: 0,
      errorNum: 0
    }
  },
  created() {
    this.id = this.$route.query.id
    // this.getDetail()
    // this.getWebsiteList()
    if (this.is_end) {
      this.$message.success('分析完成')
      clearInterval(this.timer2)
    } else {
      this.timer2 = setInterval(this.getDetail(), 5000)
    }
  },
  methods: {
    goTop() {
      document.documentElement.scrollTop = 0
      this.btnList.forEach((e, i) => {
        this.btnList[i].class = ''
      })
      this.btnList[0].class = 'active'
    },
    getDetail() {
      seoCheckApi.SeoCheck({ task_id: this.id, flag: 'progress' }).then(res => {
        if (res.code == 0) {
          console.log(res, 'res>>>>>>>>>>>>>>>')
          res.data.check_data.forEach((e, i) => {
            this.checkData[e.code] = e.data
            this.totalData.push(e.code)
          })
          this.successNum = res.data.success
          this.errorNum = res.data.error
          this.task = res.data.task
          this.is_end = res.data.is_end
          this.progressNum = this.totalData.length * 20
          if (this.progressNum > 100) {
            this.progressNum = 100
          }
        }
      })
    },
    handleChange(val) {
      console.log(val)
    },
    returnDiv(idStr, key) {
      document.querySelector(idStr).scrollIntoView(true)
      this.btnList.forEach((e, i) => {
        this.btnList[i].class = ''
      })
      this.btnList[key].class = 'active'
    }
  }
}
</script>
<style lang="scss">
.box {
  display: block;
  padding-bottom: 50px;
}
.reportBox {
  width: 100%;
  padding: 30px 230px 0;
  text-align: center;
  margin: 0 auto;

  .topBox {
    display: inline-block;
    vertical-align: middle;

    .seoImg {
      max-width: 300px;
      display: block;
      float: right;
    }
  }
  .topBox2 {
    padding-top: 60px;
    text-align: left;

    h4 {
      font-size: 20px;
      line-height: 40px;
    }
    p {
      font-size: 14px;
      line-height: 50px;
    }
    div {
      display: block;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 20px;
      font-size: 14px;

      i {
        display: inline-block;
        vertical-align: middle;
        color: #5fb878;
        margin-right: 10px;
        font-size: 16px;
      }
      i.check {
        color: #ffb800;
      }

      span {
        display: inline-block;
        vertical-align: middle;
        margin-right: 30px;
      }
      span.success {
        color: #5fb878;
      }
      span.check {
        color: #ffb800;
      }
    }
  }

  .topBox3 {
    width: 33.3%;
    padding-top: 50px;
    text-align: left;
    .grid-content {
      display: inline-block;
      text-align: center;

      .el-progress--circle .el-progress__text,
      .el-progress--dashboard .el-progress__text {
        font-size: 32px;
        color: rgb(32, 160, 255);
      }
    }
  }
  .cardBox {
    display: block;
    padding-bottom: 20px;

    .box-card {
      display: block;
      width: calc(100% - 110px);
      text-align: left;
      .header {
        padding-bottom: 20px;
        font-size: 16px;
        border-bottom: solid 1px #eee;
        font-weight: bold;
      }
    }
  }
}

.rightMenu {
  display: block;
  position: fixed;
  top: calc(50% - 50px);
  right: 200px;
  width: 100px;

  a {
    font-size: 14px;
    display: block;
    width: 100%;
    line-height: 40px;
    cursor: pointer;
    transition: all 0.3s;
    padding: 0 5px;

    i {
      padding-right: 5px;
    }
  }
  a.active {
    background-color: #5fb878;
    border-radius: 5px;
    color: #fff;
  }
  a:hover {
    opacity: 0.7;
  }
}
</style>
<style>
.red {
  color: #ff5722;
}
.green {
  color: #5fb878;
}
.loading {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 0;
  position: relative;
}
.loading svg {
  width: 100%;
  height: 100%;
}
.loading #pulsar {
  stroke-dasharray: 281;
  animation: dash 3.5s infinite linear forwards;
  -webkit-animation: dash 3.5s infinite linear forwards;
}
/*Animation*/
@keyframes dash {
  from {
    stroke-dashoffset: 814;
  }
  to {
    stroke-dashoffset: -814;
  }
}
@-webkit-keyframes dash {
  from {
    stroke-dashoffset: 814;
  }
  to {
    stroke-dashoffset: -814;
  }
}
</style>
